<template>
  <div id="add_specs_app">
    <el-dialog
      :title="form_data.id ? '编辑用户' : '添加用户'"
      :visible.sync="isShow.flag"
      width="50%"
    >
      <el-form ref="form" :model="form_data" label-width="80px" :rules="rules">
        <el-form-item label="属性名" prop="specsname">
          <el-input v-model="form_data.specsname"></el-input>
        </el-form-item>
        <el-form-item label="属性值" prop="attrs">
          <div
            style="display: flex; margin-bottom: 20px"
            v-for="(attr, i) in attr_list"
            :key="i"
          >
            <el-input v-model="attr_list[i]" type="text"> </el-input>
            <el-button type="primary" @click="addattrs" v-if="i === 0"
              >新增</el-button
            >
            <el-button type="warning" @click="delattrs" v-else>删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form_data.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow"],
  data() {
      var attrs_valid = (rule, value, callback) => {
      //rule校验规则，是一个ele内置的方法，通常不用
      //value 被校验的值
      //callback 回调函数，直接回调代码没有错误
      this.attr_list.forEach((item) => {
        if (item.trim() === "") {
          return callback(new Error("商品规格不可以为空"));
        }
      });
      callback(); //没有问题，校验通过
    };
    return {
      attr_list: [""],
      form_data: {
        specsname: "",
        attrs: "",
        status: "",
      },
      rules: {
        specsname: {
          required: true,
          message: "属性名不能为空",
          trigger: "blur",
        },
        attrs: { validator: attrs_valid,  trigger: "blur" },
        status: { required: true, message: "状态不能为空", trigger: "blur" },
      },
    };
  },
  methods: {
      sendData(obj){
          this.form_data = {...obj}
          this.attr_list = obj.attrs
      },
    addattrs() {
      if (this.attr_list.length < 5) {
        this.attr_list.push("");
      } else {
        this.$message({
          type: "warning",
          message: "最多只能添加5个哦",
        });
      }
    },
    delattrs(i) {
      this.attr_list.splice(i, 1);
    },
    submit() {
        var url = "/specsadd"
        if(this.form_data.id){
            url = "/specsedit"
        }
      this.form_data.attrs = this.attr_list.join(",");
      this.$axios.post(url,this.form_data).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.form_data = {
            specsname: "",
            attrs: "",
            status: "",
          };
          this.isShow.flag = false;
          this.$emit("reload");
        }
      });
    },
  },
};
</script>

<style>
</style>